<template>
	<view class="main">
		<!-- 吸顶 -->
		<view class="top" v-if="false">
			<!-- 没地址 -->
			<view class="topSelect">
				选择配送地址 <u-icon name="arrow-right" color="black" size="20"></u-icon>
			</view>
			<view class="" v-if="false">
				送至：<text>地址详细地址</text>
			</view>
		</view>
		<view class="head">
			<view class="head-t">
				<view class="head-tL">
					<view class="head-tL-t">
						地址 <text>详细地址</text>
					</view>
					<view class="head-tL-b">
						名字 <text>手机号</text>
					</view>
				</view>
				<view class="head-tR">
					<u-icon name="arrow-right" color="rgb(144, 147, 153)" size="20"></u-icon>
				</view>
			</view>
			<view class="head-b">
				<view class="head-bT">
					选择配送时间
				</view>
				<view class="head-bB">
					<view class="head-bB-item">
						<view class="head-bB-itemT">
							立即送出
						</view>
						<view class="head-bB-itemB">
							25分钟内送达
						</view>
					</view>
					<view class="head-bB-item head-bB-itemR">
						预约送达
					</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="orderTitle">
				商品清单 <text>1件商品</text>
			</view>
			<view class="orderShop">
				<view class="orderShop-item" v-for="(item,i) in 3">
					<view class="orderShop-itemL">
						<image src="../../static/home/j-invite-share-guide.gif" mode=""></image>
						<view class="orderShop-itemL-text">
							<view class="orderShop-itemL-textT">
								对哦IQ就哦IQ继电器忘记你第七我那
							</view>
							<view class="orderShop-itemL-textC">
								500ML*1
							</view>
							<view class="orderShop-itemL-textB">
								x1
							</view>
						</view>
					</view>
					<view class="orderShop-itemR">
						<view class="orderShop-itemRT">
							<span>￥</span>36
						</view>
						<view class="orderShop-itemRB">
							￥48
						</view>
					</view>
				</view>
			</view>
			<view class="activity">
				<view class="activityItem">
					<view class="activityItem-l">
						<text>促</text>促销优惠
					</view>
					<view class="activityItem-r">
						-￥21
					</view>
				</view>
				<view class="activityItem">
					<view class="activityItem-l">
						<text>券</text>优惠券
					</view>
					<view class="activityItem-r">
						-￥21 <u-icon name="arrow-right" color="rgb(144, 147, 153)" size="20"></u-icon>
					</view>
				</view>
				<view class="activityItem">
					<view class="activityItem-l">
						<text>积</text>积分抵扣
					</view>
					<view class="activityItem-r activityItem-rNo">
						暂无可用积分
					</view>
				</view>
			</view>
			<view class="rule">
				<view class="ruleT">
					<view class="ruleT-l">
						优惠规则<u-icon name="question-circle"></u-icon>
					</view>
					<view class="ruleT-r">
						已优惠<text>￥57</text>
						<view class="ruleT-rNum">
							合计￥<text>132</text>
						</view>
					</view>
				</view>
				<view class="ruleB">
					<view class="ruleB-l">
						骑手帮买
					</view>
					<view class="ruleB-r">
						<text>想买点什么</text>
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="payTitle">
				支付方式
			</view>
			<view class="payList">
				<view class="payItem">
					<view class="payItem-l">
						<u-icon name="weixin-circle-fill" color="#09BB07" size="60"></u-icon>
						<view class="payItem-lText">
							微信
						</view>
						<view class="payItem-lHit">
							推荐
						</view>
					</view>
					<view class="payItem-r payItem-rSelect">
						<u-icon size="20" name="checkbox-mark"></u-icon>
					</view>
				</view>
				<view class="payItem">
					<view class="payItem-l">
						<u-icon name="rmb-circle-fill" color="#FF212A" size="60"></u-icon>
						<view class="payItem-lText">
							货到付款
						</view>
					</view>
					<view class="payItem-r">
						<u-icon v-if="false" size="20" name="checkbox-mark"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="serve">
			<view class="serveT">
				<view class="serveT-title">
					<view class="serveT-titleIcon">
						<u-icon size="20" name="checkbox-mark" color="red"></u-icon>
					</view>
					<view class="">
						本单享超时赔付服务
					</view>
				</view>
				<view class="serveT-text" v-for="(item,i) in 3">
					1、5454654161
				</view>
				<view class="serveT-bottom">
					查看赔付规则<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
			<view class="serveB" @click="serve=true">
				<view class="serveB-l">
					更多服务
				</view>
				<view class="serveB-r">
					<u-icon name="heart"></u-icon><text style="margin-right: 20rpx;">放心买</text>
					<u-icon name="phone"></u-icon><text>号码加密保护</text>
				</view>
			</view>
		</view>
		<view class="else">
			<view class="elseItem">
				<view class="elseItem-l">
					开具发票
				</view>
				<view class="">
					<text>不开票</text>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
			<view class="elseItem">
				<view class="elseItem-l">
					留言备注
				</view>
				<view class="elseItem-r">
					<text class="elseItem-rText">列入将商品放门外</text>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
		</view>
		<view class="button">
			<view class="buttonL">
				<view class="buttonL-l">
					<view class="buttonL-lT">
						<u-icon name="kefu-ermai" size="50"></u-icon>
					</view>
					<view class="buttonL-lB">
						客服
					</view>
				</view>
				<view class="buttonL-c"></view>
				<view class="buttonL-r">
					<view class="buttonL-rT">
						￥<text>132</text>
						<u-icon name="question-circle" size="26" color="gainsboro"></u-icon>
					</view>
					<view class="buttonL-rB">
						已优惠￥57
					</view>
				</view>
			</view>
			<view class="buttonR">
				提交订单
			</view>
			<view class="buttonHit">
				<view class="buttonHit-title">
					应付明细
				</view>
				<view class="buttonHit-item">
					商品总额:￥27
				</view>
				<view class="buttonHit-item">
					配送服务总额:￥27
				</view>
				<view class="buttonHit-post">
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
		</view>
		<view class="serveBox" v-if="serve">
			<view class="serveBox-back"></view>
			<view class="serveBox-content">
				<view class="serveBox-contentTitle">
					服务说明
					<view class="serveBox-contentTitle-icon">
						<u-icon name="close"></u-icon>
					</view>
				</view>
				<view class="serveBox-contentList">
					<view class="serveBox-contentList-item" v-for="(item,i) in 3">
						<view class="serveBox-contentList-itemT">
							<u-icon name="phone-fill" color="red"></u-icon><text>放心买</text>
						</view>
						<view class="serveBox-contentList-itemB">
							看到垃圾地矿局强迫我看【哦额蔷薇科【可千万【二开多可怕就是
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="remarkBox" v-if="remark">
			<view class="remarkBox-back"></view>
			<view class="remarkBox-content">
				<view class="remarkBox-contentTitle">
					留言备注
					<view class="remarkBox-contentTitle-icon">
						<u-icon name="close"></u-icon>
					</view>
				</view>
				<view class="remarkBox-contentList">
					<view class="remarkBox-contentList-title">
						请填写相关信息
					</view>
					<textarea value="" placeholder="留言:列如将外卖放至门口" />
					<view class="remarkBox-contentList-title">
						快捷标签
					</view>
					<view class="remarkBox-contentList-list">
						<view class="remarkBox-contentList-listItem" v-for="(item,i) in 8">
							请放门口
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serve: false,
				remark:true
			}
		}
	}
</script>

<style>
	.main {
		padding: 30rpx;
		background: linear-gradient(to bottom, #FF212A, #FFF3F3);
		padding-bottom: 200rpx;
	}

	.head {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
	}

	.head-t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #ededed;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
	}

	.head-tL-t {
		font-weight: 600;
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}

	.head-tL-t text {
		margin-left: 10rpx;
	}

	.head-tL-b text {
		margin-left: 20rpx;
	}

	.head-bT {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.head-bB {
		display: flex;
		justify-content: space-between;
	}

	.head-bB-item {
		width: calc(50% - 14rpx);
		border: 2rpx solid black;
		text-align: center;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	.order {
		background: #fff;
		margin-top: 20rpx;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.orderTitle {
		font-size: 32rpx;
	}

	.orderTitle text {
		color: gray;
		font-size: 22rpx;
		margin-left: 10rpx;
	}

	.head-bB-itemR {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.orderShop-item {
		display: flex;
		margin-top: 30rpx;
		border-bottom: 2rpx solid #ededed;
		padding-bottom: 30rpx;
	}

	.orderShop-itemL {
		display: flex;
	}

	.orderShop-itemL image {
		width: 180rpx;
		height: 180rpx;
		margin-right: 20rpx;
	}

	.orderShop-itemL-textC {
		color: gray;
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.orderShop-itemL-textB {
		font-size: 22rpx;
		margin-top: 30rpx;
	}

	.orderShop-itemR {
		width: 30%;
		text-align: right;
	}

	.orderShop-itemRT {
		font-weight: 600;
		font-size: 34rpx;
	}

	.orderShop-itemRT span {
		font-size: 24rpx;
		font-weight: 500;
		position: relative;
		top: -2rpx;
	}

	.orderShop-itemRB {
		color: gray;
		font-size: 26rpx;
		text-decoration: line-through;
	}

	.activityItem {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.activityItem-l text {
		background: #F9605B;
		color: #fff;
		border-radius: 6rpx;
		padding: 2rpx 4rpx;
		margin-right: 10rpx;
	}

	.activityItem-r {
		font-size: 24rpx;
		color: #FF212A;
	}

	.activityItem-rNo {
		color: gray;
	}

	.rule {
		border-top: 2rpx solid #ededed;
		padding-top: 30rpx;
		margin-top: 30rpx;
	}

	.ruleT {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		align-items: flex-end;
	}

	.ruleT-l {
		color: gray;
	}

	.ruleT-l text {
		margin-right: 8rpx;
	}

	.ruleT-r {
		display: flex;
		align-items: flex-end;
	}

	.ruleT-r text {
		color: #FF212A;
		margin-right: 10rpx;
	}

	.ruleT-rNum text {
		margin: 0;
		color: black;
		font-size: 42rpx;
	}

	.ruleB {
		display: flex;
		background: #FFEDF6;
		border: 2rpx solid #FFC5D1;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		justify-content: space-between;
	}

	.ruleB-r {
		color: gray;
	}

	.ruleB-r text {
		margin-right: 8rpx;
	}

	.pay {
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 0;
		padding: 30rpx;
	}

	.payTitle {
		font-size: 32rpx;
	}

	.payItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
	}

	.payItem-l {
		display: flex;
		align-items: center;
	}

	.payItem-lText {
		font-size: 32rpx;
		margin-left: 10rpx;
	}

	.payItem-lHit {
		background: #FFC5D1;
		color: #FF212A;
		font-size: 20rpx;
		margin-left: 10rpx;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
	}

	.payItem-r {
		border: 2rpx solid #ededed;
		width: 38rpx;
		height: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.payItem-rSelect {
		background: #FF212A;
		color: #fff;
	}

	.serve {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.serveT {
		border-bottom: 2rpx solid #ededed;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
	}

	.serveT-text {
		color: gray;
	}

	.serveT-bottom {
		color: #FF212A;
		margin-top: 10rpx;
	}

	.serveB {
		display: flex;
		justify-content: space-between;
	}

	.serveT-title {
		display: flex;
		margin-bottom: 20rpx;
	}

	.serveT-titleIcon {
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFEDF6;
		margin-right: 10rpx;
	}

	.serveB-r {
		display: flex;
		align-items: center;
		color: darkgray;
	}

	.serveB-r text {
		margin-left: 8rpx;
	}

	.else {
		background: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.elseItem {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #ededed;
	}

	.elseItem-r {
		font-size: 26rpx;
		color: darkgray;
	}

	.elseItem-r text {
		margin-right: 10rpx;
	}

	.button {
		position: fixed;
		bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		left: 0;
		right: 0;
		margin: auto;
		color: #fff;
		/* 		border-radius: 100rpx; */
		/* 		overflow: hidden; */
		align-items: center;
		height: 140rpx;
	}

	.buttonL {
		background: #2A2A2A;
		flex: 1;
		display: flex;
		padding: 30rpx;
		padding-left: 50rpx;
		align-items: center;
		height: 140rpx;
		border-radius: 100rpx 0 0 100rpx;
	}

	.buttonL-l {
		text-align: center;
	}

	.buttonL-c {
		width: 2rpx;
		height: 60rpx;
		background: gray;
		margin: 0 20rpx;
	}

	.buttonL-r {
		font-size: 22rpx;
	}

	.buttonL-r text {
		font-size: 36rpx;
		margin-right: 8rpx;
	}

	.buttonL-rB {
		color: gainsboro;
	}

	.buttonR {
		background: #FF212A;
		padding: 30rpx;
		height: 140rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		border-radius: 0 100rpx 100rpx 0;
	}

	.buttonL-lB {
		font-size: 22rpx;
	}

	.buttonHit {
		position: absolute;
		background: #FFEDF6;
		color: gray;
		border-radius: 10rpx;
		top: -120rpx;
		left: 200rpx;
		font-size: 24rpx;
		padding: 20rpx;
	}

	.buttonHit-item {
		margin-top: 4rpx;
	}

	.buttonHit-post {
		position: absolute;
		color: #FFEDF6;
		bottom: -16rpx;
	}

	.top {
		position: fixed;
		top: 0;
		background: #fff;
		width: 100%;
		left: 0;
		padding: 20rpx;
	}

	.top text {
		font-weight: 600;
	}

	.topSelect {
		border: 2rpx solid black;
		padding: 4rpx 10rpx;
		display: inline-block;
		border-radius: 6rpx;
	}

	.serveBox,.remarkBox {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
	}

	.serveBox-back,.remarkBox-back {
		background: #2A2A2A;
		width: 100%;
		height: 100vh;
		opacity: .6;
	}

	.serveBox-content,.remarkBox-content {
		background: #F5F5F5;
		position: fixed;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		width: 100%;
	}

	.serveBox-contentTitle,.remarkBox-contentTitle {
		background: #fff;
		text-align: center;
		padding: 20rpx 0;
		font-size: 34rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
	}

	.serveBox-contentList{
		padding: 30rpx;
	}
	.serveBox-contentList-item{
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	.serveBox-contentList-itemB{
		color: gray;
		font-size: 26rpx;
	}
	.serveBox-contentList-itemT text{
		margin-left: 8rpx;
	}
	.serveBox-contentTitle-icon,.remarkBox-contentTitle-icon{
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
	.remarkBox-contentList{
		background: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}
	.remarkBox-contentList-title{
		font-size: 30rpx;
	}
	.remarkBox-contentList textarea{
		background: #FAFAFA;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}
	.remarkBox-contentList-list{
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.remarkBox-contentList-listItem{
		border: 2rpx solid grey;
		color: grey;
		padding:10rpx 20rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
